<template>
    <div class="manage">
      <el-dialog
  title="项目信息"
  :visible.sync="itemDialogVisible"
  width="50%">
  <div class="itemArea"  style="font-size:18px">
    <div class="top" style="display:flex;justify-content:space-around">
      <div class="top-l" style="width:200px;height:200px">
        <img style="width:100%;height:100%" :src="evUrl+form.item_pic"/>
      </div>
      <div class="top-r" style="padding-top:18px;margin-bottom:10px">
        <div style="margin-bottom:10px">活动标题：{{form.item_tit}}</div>
        <div style="margin-bottom:10px">服务时长：{{form.service_time}}</div>
        <div style="margin-bottom:10px">联系人：{{form.contacts}}</div>
        <div style="margin-bottom:10px">手机号码：{{form.phone}}</div>
        <div style="margin-bottom:10px">岗位名称：{{form.station}}</div>
        <div style="margin-bottom:10px">岗位人数：{{form.num}}</div>
        <div style="margin-bottom:10px">活动地址：{{form.addr}}</div>
        <div style="margin-bottom:10px">活动描述：{{form.item_describe}}</div>
        <!-- <div style="margin-bottom:10px">报名开始时间：{{form.startTime}}</div>
        <div style="margin-bottom:10px">报名截止时间：{{form.endTime}}</div> -->
        <div>活动类型：{{form.item_type}}</div>
      </div>
    </div>
  </div>
</el-dialog>
      <el-dialog
     title="教师信息"
     top='5vh'
     :visible.sync="dialogVisible"
     width="58%">
     <div class="details">
      <div class="detail-l">
        <div class="imgDiv"><img :src="evUrl+(teachetInfo.t_pic)" alt="暂无图片"/></div>
      </div>
      <div class="detail-r" style="font-size:18px">
        <ul class="iteminfo">
          <li>姓名：{{teachetInfo.t_real_name}}</li>
          <li>性别：{{teachetInfo.t_sex}}</li>
          <li>联系电话：{{teachetInfo.t_phone}}</li>
          <li>地址：{{teachetInfo.t_addr}}</li>
          <li>民族：{{teachetInfo.native_place}}</li>
          <li>专业：{{teachetInfo.major}}</li>
          <li>生日：{{teachetInfo.birth}}</li>
          <li>支教次数：{{teachetInfo.t_count}}</li>
        </ul>
          <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </div>
     </div>
    </el-dialog>
<el-dialog
title="面试信息"
top='5vh'
:visible.sync="iterviewShow"
width="51%">
<el-form ref="formView" :rules="rulesSend" :model="interviewInfo" label-width="80px">
  <el-form-item label="面试方式" prop="iStyle">
    <el-input type="textarea" v-model="interviewInfo.iStyle"></el-input>
  </el-form-item>
  <el-form-item label="地点">
    <el-input v-model="interviewInfo.iAddr"></el-input>
  </el-form-item>
  <el-form-item label="时间" prop="myDate" >
    <el-col :span="7">
      <el-date-picker type="date" placeholder="选择日期" v-model="interviewInfo.myDate" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="1">----</el-col>
    <el-col :span="6">
      <el-time-picker placeholder="选择时间" v-model="interviewInfo.myTime" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-button @click="sendInterview" type="primary">发起邀请</el-button>

</el-form>

</el-dialog>
<el-dialog
title="面试信息"
top='5vh'
:visible.sync="openViewInfo"
width="51%">
<div style="margin-bottom:8px;font-size:18px">面试形式：{{currentInfo.iStyle}}</div>
<div style="margin-bottom:8px:font-size:18px">面试时间：{{currentInfo.iTime}}</div>
<div v-if="currentInfo.iAddr" style="margin-bottom:8px">面试地点：{{currentInfo.iAddr}}</div>
<el-button disabled size="mini" v-if="currentInfo.iStatus==1">待教师确认</el-button>
<el-button disabled size="mini" v-if="currentInfo.iStatus==2">教师已确认</el-button>

</el-dialog>
        <div class="common-tabel">
          <span>待审核</span>
            <el-table
    :data="tableData"
    style="width: 100%"
    :cell-style="{textAlign:'center',padding:'7px'}"
    :header-cell-style="{background:'blue',color:'#ffffff',textAlign:'center',padding:'3px',opacity:0.7}">
    <el-table-column
    label="编号"
      prop="recordId">
    </el-table-column>
    <el-table-column
    label="教师名称"
      prop="t_real_name">
    </el-table-column>
    <el-table-column
    label="活动信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="itemDetails(scope.row)">活动信息</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="教师信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="teacherDetails(scope.row)">教师信息</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="简历">
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.my_notes"
          size="mini"
          type="primary"
          icon="el-icon-view"
          @click="openNotes(scope.row)">
          </el-button>
        <el-button
          v-else
          size="mini"
          type="primary"
          disabled
          icon="el-icon-view">
          </el-button>
      </template>
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button
          v-if="!scope.row.iStatus"
          size="mini"
          type="primary"
          @click="giveInterview(scope.row)">面试邀请</el-button>
          <el-button
          v-if="scope.row.iStatus"
          size="mini"
          type="primary"
          @click="giveViewInfo(scope.row)">面试信息</el-button>
      </template>
    </el-table-column>
    <el-table-column
      align="right"
      width='180'>
      <template slot-scope="scope">
        <el-button
          v-if="!(scope.row.exaStatus=='1' || scope.row.exaStatus=='2' || scope.row.exaStatus=='3' || scope.row.exaStatus=='4')"
          size="mini"
          type="primary"
          @click="handlePass(scope.$index, scope.row)">通过</el-button>
        <el-button
          v-if="!(scope.row.exaStatus=='1' || scope.row.exaStatus=='2' || scope.row.exaStatus=='3' || scope.row.exaStatus=='4')"
          size="mini"
          type="danger"
          @click="handleReject(scope.$index, scope.row)">驳回</el-button>
          <el-button
          v-if="(scope.row.exaStatus=='1' || scope.row.exaStatus=='2')"
          size="mini"
          type="danger"
          disabled>待教师确认</el-button>
          <el-button
          v-if="(scope.row.exaStatus==4)"
          size="mini"
          type="danger"
          disabled>教师拒绝</el-button>
          <el-button
          v-if="(scope.row.exaStatus==4)"
          size="mini"
          type="danger" @click="deleteOpt(scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

        </div>
        <div class="footer" style="position:absolute;right:0;bottom:0">
    <div class="block">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</div>
    </div>
</template>
<script>
import { schoolGetRecord, schoolExamin, getTeacherd, getAtivityd, postInterview, deleteMyCount } from '../api/record'
export default {
  data () {
    return {
      evUrl: this.$evUrl,
      currentPage: 1,
      tableData: [],
      lastTableData: [],
      dialogVisible: false,
      iterviewShow: false,
      currentInfo: {},
      search: '',
      total: 1, // 当前的总条数
      pageData: {
        page: 1,
        limit: 10
      },
      currentRow: {},
      interviewInfo: {
        iStyle: '',
        iAddr: '',
        myDate: '',
        myTime: ''
      },
      teachetInfo: {
      },
      openViewInfo: false,
      rulesSend: {
        iStyle: [
          { required: true, message: '请输入方式', trigger: 'blur' }
        ],
        myDate: [
          { required: true, message: '请输入时间', trigger: 'blur' }
        ]
      },
      itemDialogVisible: false,
      form: {}
    }
  },
  computed: {},
  methods: {
    // 页码
    handleCurrentChange (val) {
      this.currentPage = val
      this.tableData = this.newTableData.slice(this.currentPage * 10 - 10, this.currentPage)
    },
    // 获取列表的数据
    getList () {
      this.pageData.token = window.localStorage.getItem('token').slice(6)
      // 获取的列表的数据
      schoolGetRecord({ params: { ...this.pageData } }).then(({ data }) => {
        // console.log(data)
        this.newTableData = data.list
        // console.log(this.newTableData)
        this.total = this.newTableData.length
        this.tableData = this.newTableData.slice(0, 10)
        this.lastTableData = data.list.filter((item) => { return item.exaStatus !== null })
        // console.log(data.list)
        // console.log(this.tableData)

        // this.total = data.count || 0
      })
    },
    // 通过审核
    handlePass (index, row) {
      // console.log(index, row)
      row.exaVal = 1
      schoolExamin(row).then(({ data }) => {
        this.$message.success(data.message)
        // console.log(data)
        this.getList()
      })
    },
    // 驳回
    handleReject (index, row) {
      this.$prompt('请输入原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        row.exaVal = 2
        schoolExamin({ ...row, val: value }).then(({ data }) => {
          // console.log(data)
          this.getList()
        })
        this.$message({
          type: 'success',
          message: '原因：' + value
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 教师信息
    teacherDetails (row) {
      getTeacherd({ tId: row.t_id }).then(({ data }) => {
        // console.log(data.details)
        this.teachetInfo = JSON.parse(JSON.stringify(data.details))
      })
      this.dialogVisible = true
      // console.log(row)
    },
    // 项目信息
    itemDetails (row) {
      this.itemDialogVisible = true
      getAtivityd({ iId: row.itemId }).then(({ data }) => {
        this.form = JSON.parse(JSON.stringify(data.list))
        this.form.activityTime = [data.list.startTime, data.list.endTime]
        const endTime = Date.parse(data.list.endTime)
        const nowTime = Date.parse(new Date())
        if (endTime <= nowTime) {
          this.form.status = '活动已经结束'
        } else {
          this.form.status = '进行中！'
        }
      })
      // console.log(row.itemId)
    },
    // 看简历
    openNotes (row) {
      window.open(this.evUrl + row.my_notes)
    },

    // 选择页码的回调函数
    handlePage (val) {
      // console.log(val, 'val')
      this.pageData.page = val
      this.getList()
    },
    // 详情列表
    details (row) {
      const detailInfo = `项目名称：${row.itemName}联系人:${row.contacts}联系电话:${row.phone}支教岗位:${row.station}
      人数:${row.num},开始时间:${row.startTime}结束时间:${row.endTime}地址：${row.addr}描述:${row.describe}`
      this.$alert(detailInfo, '详情', {
        confirmButtonText: '确定'
        // callback: action => {
        //   this.$message({
        //     type: 'info',
        //     message: `action: ${action}`
        //   })
        // }
      })
    },
    // 面试邀请
    giveInterview (row) {
      this.iterviewShow = true
      this.currentRow = row
      // console.log('面试邀请', row)
    },
    // 发送邀请
    sendInterview () {
      this.$refs.formView.validate((valid) => {
        if (valid) {
          const myDate = this.$moment(this.myTime).format('YYYY-MM-DD')
          const myTime = this.$moment(this.myTime).format('hh-mm-ss')
          const finallTime = myDate + ' ' + myTime
          postInterview({ itId: this.currentRow.recordId, ...this.interviewInfo, Itime: finallTime }).then(({ data }) => {
            if (data.status === 200) {
              this.$message.success('发送成功')
              this.getList()
              this.iterviewShow = false
            }
          })
        } else {
          this.$message.info('请填写表单')
        }
      })
    },
    // 拿到面试信息
    giveViewInfo (row) {
      // console.log('hello')
      this.currentInfo = row
      // console.log(this.currentInfo)

      this.openViewInfo = true
      // console.log(this.openViewInfo)
    },
    // 删除数据
    deleteOpt (row) {
      deleteMyCount(row).then(({ data }) => {
        this.$message.info('删除成功')
        this.getList()
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
<style lang="less" scoped>
.manage {
    // height: 90%;
    .common-tabel {
        position: relative;
        margin-bottom: 30px;
        height: calc(100% - 62px);
        .pager {
            position: absolute;
            bottom: -30px;
            right: 20px;
        }
    }
    .details{
      display: flex;
      height: 400px;
      .detail-l{
        width:30%;
        .imgDiv{
          width: 80%;
          img{
            width: 100%;
          }
        }
      }
      .detail-r{
        width:60%;
        .iteminfo{
          padding: 0;
          li{
            list-style: none;
            padding-left: 20px;
            border-bottom: 1px solid purple;
            margin-bottom: 10px;

          }
        }
      }
    }
}
</style>
